---
title: Understanding Plugins
description: Learn how plugins add features like zooming, searching, and annotations to your headless PDF viewer in Vue.
---

# Understanding Plugins

Plugins are the heart of EmbedPDF's headless architecture. They are modular packages that add specific features and capabilities to your core viewer. This à la carte approach ensures your application remains lean, loading only the functionality you actually need.

Think of the `<EmbedPDF>` component as a smartphone: it's powerful on its own, but it's the apps (plugins) you install that give it new features like navigation, social media, or games.

## Example: Adding a Zoom Feature

Let's walk through a complete example of adding a zoom feature to a basic viewer.

### 1. Install the Plugin Package

First, install the zoom plugin package:

```sh npm2yarn
npm install @embedpdf/plugin-zoom
````

### 2. Register the Plugin

Next, import `ZoomPluginPackage` and add it to the `plugins` array that you pass to the `<EmbedPDF>` component. This activates the zoom functionality.

```vue {4,14}
<script setup lang="ts">
// ... other imports
import { createPluginRegistration } from '@embedpdf/core';
import { ZoomPluginPackage } from '@embedpdf/plugin-zoom/vue';

const plugins = [
  // ... other essential plugins
  createPluginRegistration(LoaderPluginPackage, { /* ... */ }),
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),
  createPluginRegistration(RenderPluginPackage),

  // Add the zoom plugin to the array
  createPluginRegistration(ZoomPluginPackage),
];
</script>
```

### 3. Create a UI Component with the Plugin's Composable

With the plugin registered, you can create a new component that uses the `useZoom` composable to access reactive state and functions.

```vue copy filename="ZoomToolbar.vue"
<script setup lang="ts">
import { useZoom } from '@embedpdf/plugin-zoom/vue';

// The composable provides reactive state and methods
const { provides, state } = useZoom();
</script>

<template>
  <div v-if="provides" style="padding: 8px; background: #eee; display: flex; gap: 8px; align-items: center;">
    <span>Zoom: {{ Math.round(state.currentZoomLevel * 100) }}%</span>
    <button @click="provides.zoomOut()">-</button>
    <button @click="provides.zoomIn()">+</button>
    <button @click="() => provides.requestZoom(1.0)">Reset</button>
  </div>
</template>
```

### 4. Add the Component to Your Viewer

Finally, import and place your new `<ZoomToolbar />` component **inside** the `<EmbedPDF>` provider. This is essential, as it allows the `useZoom` composable to access the context provided by the `ZoomPluginPackage`.

```vue filename="PDFViewer.vue" {3, 10}
<script setup lang="ts">
import { EmbedPDF } from '@embedpdf/core/vue';
import ZoomToolbar from './ZoomToolbar.vue'; // 1. Import the toolbar
// ... other setup
</script>

<template>
  <div style="height: 500px; border: 1px solid black; display: flex; flexDirection: 'column'">
    <EmbedPDF :engine="engine" :plugins="plugins">
      <ZoomToolbar /> {/* 2. Add the component here */}
      <div style="flex: 1; overflow: 'hidden'">
        <Viewport>
          {/* ... Scroller and RenderLayer ... */}
        </Viewport>
      </div>
    </EmbedPDF>
  </div>
</template>
```